<template>
  <el-dialog :title="title" v-loading="loading" :visible.sync="visible" @close="handleCancel" :append-to-body="true"
    width="400px">
    <div class="handle-box" v-if="title == '分配会计'">
      <flexbox class="handle-item" align="stretch">
        <div class="handle-item-name" style="margin-top: 8px;">选择做账会计：</div>
        <xh-user-cell class="handle-item-content" :radio="true" placeholder="点击选择（单选）" @value-change="accountancyChage"
          infoType="1">
        </xh-user-cell>
      </flexbox>
    </div>
    <div class="handle-box" v-if="title == '分配会计'">
      <flexbox class="handle-item" align="stretch">
        <div class="handle-item-name" style="margin-top: 8px;">选择咨询会计：</div>
        <xh-user-cell class="handle-item-content" :radio="true" placeholder="点击选择（单选）" @value-change="consultChage"
          infoType="2">
        </xh-user-cell>
      </flexbox>
    </div>
    <div class="handle-box" v-if="title == '分配会计'">
      <flexbox class="handle-item" align="stretch">
        <div class="handle-item-name" style="margin-top: 8px;">选择服务开始时间：</div>
        <div class="select-group">
          <el-date-picker v-model="accounting_start_time" type="date" :value-format="'yyyy-MM-dd HH:mm:ss'"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </flexbox>
    </div>
    <div class="handle-box" v-if="title == '工本费'">
      <flexbox class="handle-item" align="stretch">
        <div class="handle-item-name" style="margin-top: 16px;">请填写工本费：</div>
        <el-input-number v-model="cost_production" style="margin-top: 8px;" :precision="2" clearable
          placeholder="请输入工本费"></el-input-number>

        <!-- <el-input v-model="cost_production" type="number" clearable placeholder="请输入工本费"></el-input> -->
      </flexbox>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click.native="handleCancel">取消</el-button>
      <el-button type="primary" @click.native="handleConfirm">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    XhUserCell
  } from '@/components/CreateCom'
  import {
    allocation,
  } from '@/api/common'
  import {
    accountingCost
  } from '@/api/customermanagement/common'

  export default {
    /** 客户管理 的 勾选后的 团队成员 操作 移除操作不可移除客户负责人*/
    name: 'teams-handle',
    components: {
      XhUserCell
    },
    mixins: [],
    watch: {
      dialogVisible: {
        handler(val) {
          this.visible = val
          if (val) {}
        },
        deep: true,
        immediate: true
      }
    },
    props: {
      dialogVisible: {
        type: Boolean,
        required: true,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      /** 没有值就是全部类型 有值就是当个类型 */
      crmType: {
        type: String,
        default: ''
      },
      contractId: {
        type: String,
        default: ''
      },
      /** 转移数据 */
      selectionList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        value1: '',
        loading: false, // 加载动画
        visible: false,

        usersList: [], // 变更负责人
        handleType: 1, // 操作类型
        addsTypes: [], // 添加至
        accountancy_user_id: '',
        consult_user_id: '',
        accounting_start_time: '',
        cost_production: ''
      }
    },
    computed: {},
    mounted() {
      this.visible = this.dialogVisible
    },
    methods: {
      /**
       * 取消选择
       */
      handleCancel() {
        this.visible = false
        this.$emit('update:dialogVisible', false)
      },
      /** 负责人更改 */
      consultChage(data) {
        this.consult_user_id = data.value[0].id
      },
      /** 负责人更改 */
      accountancyChage(data) {
        this.accountancy_user_id = data.value[0].id
      },
      handleConfirm() {
        console.log('eeeeeeeeeeee')
        if (this.title == '分配会计') {
          if (this.accountancy_user_id == '') {
            this.$message.error('请选择做账会计')
          } else if (this.consult_user_id == '') {
            this.$message.error('请选择咨询会计')
          } else if (this.accounting_start_time == '') {
            this.$message.error('请选择服务开始时间')
          } else {
            this.loading = true
            allocation({
                contract_id: this.contractId,
                accountancy_user_id: this.accountancy_user_id,
                consult_user_id: this.consult_user_id,
                accounting_start_time: this.accounting_start_time
              })
              .then(res => {
                this.$message({
                  type: 'success',
                  message: res.data
                })
                this.loading = false
                this.handleCancel()
              })
              .catch(() => {
                this.loading = false
              })
          }
        } else {
          this.loading = true
          accountingCost({
              cost_production: this.cost_production,
              contract_id: this.contractId
            })
            .then(res => {
              this.$message({
                type: 'success',
                message: res.data
              })
              this.loading = false
              this.handleCancel()
            })
            .catch(() => {
              this.loading = false
            })
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  .tips {
    color: #777;
    font-size: 12px;
    position: absolute;
    bottom: -2px;
    right: 125px;
  }

  .handle-box {
    color: #333;
    font-size: 12px;
  }

  .handle-item {
    padding-bottom: 15px;
    position: relative;

    .handle-item-name {
      flex-shrink: 0;
      width: 120px;
    }

    .handle-item-content {
      flex: 1;
    }
  }

  .handle-bar {
    position: relative;
    margin-top: 10px;
    height: 30px;

    button {
      float: right;
      margin-right: 10px;
    }
  }

</style>
